<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="sales">
          <el-row :gutter="20">
            <el-col :span="13">
              <div class="work_order_statistical">
                <p>
                  工单统计<span>{{ start }} ~ {{ end }}</span>
                </p>
                <el-row>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <p>{{ total }}</p>
                      <p>工单总数（个）</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <p>{{ completedTotal }}</p>
                      <p>完成工单（个）</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <p>{{ progressTotal }}</p>
                      <p>进行工单（个）</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <p>{{ cancelTotal }}</p>
                      <p>取消工单（个）</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="sales_statistics">
                <p>
                  销售统计<span>{{ start }} ~ {{ end }}</span>
                </p>
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <p>{{ orderCount }}</p>
                      <p>订单量（个）</p>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <p>{{ orderAmountNum }}</p>
                      <p>销售额（万元）</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="sales_data">
                <div>
                  <p>
                    销售数据<span>{{ salesStartTime }} ~ {{ end }}</span>
                  </p>
                  <el-button-group class="btnGroup">
                    <el-button @click="setWeeks" size="mini" :plain="true" type="primary">周</el-button>
                    <el-button @click="setMonth" size="mini" :plain="true" type="primary">月</el-button>
                    <el-button @click="setYears" size="mini" :plain="true" type="primary">年</el-button>
                  </el-button-group>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <div ref="charLeft" class="echartsLeft"></div>
                    </el-col>
                    <el-col :span="12">
                      <div ref="charRight" class="echartsRight"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="hot">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <p>
                商品热榜<span>{{ start }} ~ {{ end }}</span>
              </p>
            </div>
            <ul>
              <li v-for="(item, index) in hot" :key="index">
                <div class="one">{{ index + 1 }}</div>
                <div class="two">{{ item.skuName }}</div>
                <div class="three">{{ item.count }}单</div>
              </li>
            </ul>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="13">
        <div class="cooperation_num">
          <p>合作商点位数Top5</p>
          <el-row :gutter="20">
            <el-col :span="16">
              <div ref="charPie" class="echartsPie"></div>
            </el-col>
            <el-col :span="8">
              <div class="list">
                <div class="cooperation">
                  <div>{{ nodeCount }}</div>
                  <div>点位数</div>
                  <div>{{ partnerCount }}</div>
                  <div>合作商数</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="abnormal_equipment">
          <p>异常设备监控</p>
          <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="" />
          <div>暂无数据</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSalesRanking, getCurrentWork, getOrderAmount, getOrderCount, getRegionCollect, getAmountCollect, getNodeCollect, getNodeCount, getPartnerCount } from '@/api/likede'
export default {
  data () {
    return {
      hot: {},
      total: 0,
      completedTotal: 0,
      progressTotal: 0,
      cancelTotal: 0,
      orderAmount: 0,
      orderCount: 0,
      amountCollect: {},
      regionCollect: {},
      charLeft: null,
      nodeCollect: [],
      salesStartTime: `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-${new Date().getDate() - (new Date().getDay() || 7) + 1}`,
      nodeCount: 0,
      partnerCount: 0
    }
  },
  computed: {
    end () {
      return `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-${new Date().getDate()}`
    },
    start () {
      return `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-01`
    },
    weeksStart () {
      return `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-${new Date().getDate() - (new Date().getDay() || 7) + 1}`
    },
    yearsStart () {
      return `${new Date().getFullYear()}-01-01`
    },
    orderObj () {
      return { start: this.start + ' 00:00:00', end: this.end + ' 00:00:00' }
    },
    orderAmountNum () {
      return (this.orderAmount / 1000000).toFixed(2)
    },
    optionLeft () {
      return {
        color: 'RGB(255,87,87)',
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontWeight: 600,
            fontSize: 13,
            width: 100
          }
        },
        xAxis: {
          type: 'category',
          data: this.amountCollect.xAxis
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        series: [
          {
            data: this.amountCollect.series,
            type: 'line',
            smooth: true
          }
        ]
      }
    },
    optionRight () {
      return {
        color: 'RGB(145,176,255)',
        seriesBar: {
          backgroundStyle: {
            borderRadius: [5, 5, 0, 0]
          }
        },
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontWeight: 600,
            fontSize: 13,
            width: 100
          }
        },
        xAxis: {
          type: 'category',
          data: this.regionCollect.xAxis
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        series: [
          {
            data: this.regionCollect.series,
            type: 'bar',
            barWidth: '5%',
            itemStyle: {
              borderRadius: [3, 3, 0, 0]
            }
          }
        ]
      }
    },
    optionPie () {
      return {
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 90],
            center: ['50%', '50%'],
            roseType: 'radius',
            data: []
          }
        ]
      }
    }
  },
  mounted () {
    this.echartsPie()
  },
  updated () {
    this.echartsLeft()
    this.echartsRight()
  },
  methods: {
    async setWeeks () {
      this.salesStartTime = this.weeksStart
      const regionCollect = await getRegionCollect(this.salesStartTime, this.end)
      this.regionCollect = regionCollect
      const amountCollect = await getAmountCollect(1, this.salesStartTime, this.end)
      this.amountCollect = amountCollect
    },
    async setMonth () {
      this.salesStartTime = this.start
      const regionCollect = await getRegionCollect(this.salesStartTime, this.end)
      this.regionCollect = regionCollect
      const amountCollect = await getAmountCollect(1, this.salesStartTime, this.end)
      this.amountCollect = amountCollect
    },
    async setYears () {
      this.salesStartTime = this.yearsStart
      const regionCollect = await getRegionCollect(this.salesStartTime, this.end)
      this.regionCollect = regionCollect
      const amountCollect = await getAmountCollect(2, this.salesStartTime, this.end)
      this.amountCollect = amountCollect
    },
    echartsLeft () {
      if (this.amountCollect.series) {
        this.charLeft = echarts.init(this.$refs.charLeft)
        this.charLeft.setOption(this.optionLeft)
      }
    },
    echartsRight () {
      if (this.regionCollect.series) {
        this.charRight = echarts.init(this.$refs.charRight)
        this.charRight.setOption(this.optionRight)
      }
    },
    echartsPie () {
      if (this.optionPie.series[0].data.length > 0) {
        this.charPie = echarts.init(this.$refs.charPie)
        this.charPie.setOption(this.optionPie)
      }
    }
  },
  async created () {
    this.setWeeks()
    // 获取销售前几的商品
    const salesRanking = await getSalesRanking(this.start, this.end, 10)
    this.hot = salesRanking
    // 获取当时工单汇总信息
    const currentWork = await getCurrentWork(this.start, this.end)
    this.total = currentWork[0].total + currentWork[1].total
    this.completedTotal = currentWork[0].completedTotal + currentWork[1].completedTotal
    this.progressTotal = currentWork[0].progressTotal + currentWork[1].progressTotal
    this.cancelTotal = currentWork[0].cancelTotal + currentWork[1].cancelTotal
    // 获取一定时间范围内收入
    const orderAmount = await getOrderAmount(this.orderObj)
    this.orderAmount = orderAmount
    // 获取一定时间范围内订单
    const orderCount = await getOrderCount(this.orderObj)
    this.orderCount = orderCount
    // 销售额折线图数据
    const amountCollect = await getAmountCollect(1, this.salesStartTime, this.end)
    this.amountCollect = amountCollect
    // 销售额柱状图数据
    const regionCollect = await getRegionCollect(this.salesStartTime, this.end)
    this.regionCollect = regionCollect
    // 合作商点位汇总统计
    const nodeCollect = await getNodeCollect()
    for (const key in nodeCollect) {
      this.optionPie.series[0].data.push({ name: nodeCollect[key].name, value: nodeCollect[key].value })
    }
    console.log(this.optionPie.series[0].data)
    this.echartsPie()
    // 获取点位总数
    const nodeCount = await getNodeCount()
    this.nodeCount = nodeCount
    // 获取合作商总数
    const partnerCount = await getPartnerCount()
    this.partnerCount = partnerCount
  }
}
</script>

<style lang="less" scoped>
.sales {
  background-color: #fff;
  height: 550px;
  margin-bottom: 20px;
  .work_order_statistical {
    background: #e9f3ff;
    background-image: url(),
      url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    height: 177px;
    border-radius: 10px;
    p {
      height: 44px;
      line-height: 44px;
      margin: 0px 10px;
      font-size: 16px;
      text-align: left;
      font-weight: 600;
      span {
        font-weight: 400;
        font-size: 12px;
        margin-left: 10px;
        color: RGB(153, 166, 196);
      }
    }
    .el-col {
      height: 130px;
      .grid-content {
        height: 130px;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-left: 15px;
        p:nth-child(1) {
          font-size: 40px;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          color: #072074;
        }
        p:nth-child(2) {
          font-size: 12px;
          color: #91a7dc;
        }
      }
    }
  }
  .sales_statistics {
    background: #fbefe8 url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
    height: 177px;
    border-radius: 10px;
    p {
      height: 44px;
      line-height: 44px;
      margin: 0px 10px;
      font-size: 16px;
      text-align: left;
      font-weight: 600;
      span {
        font-weight: 400;
        font-size: 12px;
        margin-left: 10px;
        color: RGB(153, 166, 196);
      }
    }
    .el-col {
      height: 130px;
      .grid-content {
        height: 130px;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-left: 50px;
        p:nth-child(1) {
          font-size: 40px;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          color: #ff5757;
        }
        p:nth-child(2) {
          font-size: 12px;
          color: #de9690;
        }
      }
    }
  }
  .sales_data {
    margin-top: 20px;
    background-color: #fff;
    height: 332px;
    padding: 10px;
    border-radius: 10px;
    p {
      height: 44px;
      line-height: 44px;
      margin: 0px 10px;
      font-size: 16px;
      text-align: left;
      font-weight: 600;
      span {
        font-weight: 400;
        font-size: 12px;
        margin-left: 10px;
        color: RGB(153, 166, 196);
      }
    }
  }
}
.hot {
  // background-color: orange;
  border-radius: 10px;
  height: 550px;
  ul {
    padding: 0;
    li:nth-child(n) .one {
      color: #e9b499;
      background-image: url();
    }
    li:nth-child(1) .one {
      color: #8e5900;
      background-image: url();
    }
    li:nth-child(2) .one {
      color: #494949;
      background-image: url();
    }
    li:nth-child(3) .one {
      color: #cf6d3d;
      background-image: url();
    }
    li:nth-last-child(3) .one {
      color: pink;
    }
    li {
      height: 44px;
      line-height: 44px;
      display: flex;
      .one {
        flex: 1;
        background-repeat: no-repeat;
        background-position: 50% 60%;
        font-size: 12px;
      }
      .two {
        flex: 3;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        text-align: left;
      }
      .three {
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #737589;
      }
    }
  }
  .el-card {
    border-radius: 10px;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%);
    border: 0px;
  }
  /deep/ .el-card__header {
    padding: 0px 20px;
    border: 0px;
  }
  .clearfix {
    height: 10px;
    line-height: 16px;
    font-size: 16px;
    text-align: left;
    font-weight: 600;
    span {
      font-weight: 400;
      font-size: 12px;
      margin-left: 10px;
      color: RGB(153, 166, 196);
    }
  }
}
.cooperation_num {
  background-color: #fff;
  border-radius: 10px;
  height: 355px;
  p {
    height: 44px;
    line-height: 44px;
    margin: 0px 10px;
    font-size: 16px;
    text-align: left;
    font-weight: 600;
  }
}
.abnormal_equipment {
  background-color: #fff;
  border-radius: 10px;
  height: 355px;
  p {
    height: 44px;
    line-height: 44px;
    margin: 0px 10px;
    font-size: 16px;
    text-align: left;
    font-weight: 600;
  }
  div {
    height: 20px;
    line-height: 20px;
  }
  img {
    margin-top: 50px;
  }
}
.sales {
  background-color: RGB(248, 250, 253);
}
/deep/ .btnGroup {
  position: absolute;
  top: 40px;
  right: 20px;
  button {
    background-color: RGB(248, 250, 253);
    color: #000;
    border: 0px;
  }
}
.echartsLeft {
  position: relative;
  width: 100%;
  height: 278px;
}
.echartsRight {
  width: 100%;
  height: 278px;
  // background-color: #741;
}
.echartsPie {
  width: 100%;
  height: 300px;
}
.list {
  position: relative;
  width: 100%;
  height: 300px;
  .cooperation {
    position: absolute;
    top: 30px;
    width: 9vw;
    height: 220px;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0, linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0, linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%, linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    div {
      height: 20px;
      line-height: 20px;
    }
    div:nth-child(1) {
      height: 33px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #072074;
      line-height: 33px;
      margin-top: 40px;
    }
    div:nth-child(2) {
      height: 17px;
      margin-top: 6px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000412;
      line-height: 17px;
    }
    div:nth-child(3) {
      height: 33px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #072074;
      line-height: 33px;
      margin-top: 20px;
    }
    div:nth-child(4) {
      height: 17px;
      margin-top: 6px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000412;
      line-height: 17px;
    }
  }
}
</style>
